<!--
 * @Author: 吴竹叶 2107206923@qq.com
 * @Date: 2023-10-08 17:38:46
 * @LastEditors: 孙鹏程 2145261508@qq.com
 * @LastEditTime: 2024-02-29 10:37:39
 * @FilePath: \BZ_JT_AnQuanHuanBaoGuanLiApp\src\views\staging\commom\AnnualWork\companyList.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="common-details">
    <customDetailsTopbar title="企业完成情况" :show-close="false" flag @back="back" />
    <div class="d-scroll px-1">
      <customSearch ref="customSearch" placeholder="请输入企业名称" title="企业列表" :total="total" :is-super-search="false" @search="handleSearch" />
      <el-alert :title="`截止当前，已完成集团年度重点工作的企业有${ finishNum }家，未完成集团年度重点工作的企业有${ unFinishNum }家`" type="warning" show-icon class="mb-1" :closable="false" />

      <div class="listInner">
        <div v-if="listData && listData.length>0" class="common_list">
          <div v-for="(item, index) in listData" :key="index" class="list_item" @click="goToDetails(item)">
            <div class="content_area">
              <div class="number_order">{{ index + 1 }}</div>
              <div class="right_content">
                <div class="content_title" style="max-width: 100%">
                  {{ item.companyName }}
                </div>
                <ul>
                  <li>
                    <i class="iconfont c-text-color1">&#xe8d5;</i>
                    <div class="label">所属年份：</div>
                    <div class="value">{{ item.dataYear }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color2">&#xe685;</i>
                    <div class="label">企业最新反馈时间：</div>
                    <div class="value">{{ item.updateTime === '-'?'/':item.updateTime }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color3">&#xe696;</i>
                    <div class="label">集团下发重点工作总数：</div>
                    <div class="value">{{ item.jtNum === '-'?'/':item.jtNum }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color4">&#xe64d;</i>
                    <div class="label">集团下发重点工作完成进度：</div>
                    <div class="value">{{ item.jtFinishSchedule === '-' ? '/':item.jtFinishSchedule }}{{ item.jtFinishSchedule === '-' ? '':'%' }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color5">&#xe696;</i>
                    <div class="label">企业自制定重点工作总数：</div>
                    <div class="value">{{ item.qyNum === '-'?'/':item.qyNum }}</div>
                  </li>
                  <li>
                    <i class="iconfont c-text-color6">&#xe64d;</i>
                    <div class="label">企业自制定重点工作完成进度：</div>
                    <div class="value">{{ item.qyFinishSchedule === '-' ? '/':item.qyFinishSchedule }}{{ item.qyFinishSchedule === '-' ? '':'%' }}</div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <customLoadmore ref="customLoadmore" :page-num="formInline.pageNum" :pages="pages" @load="handlePages" />
      </div>
    </div>
  </div>
</template>
<script>

import refHandler from '@/assets/mixin/refHandler'
import commonList from '@/assets/mixin/commonList'
import {
  aqYearWorkCompanyList,
  aqYearWorkDetails,
  hbYearWorkCompanyList,
  hbYearWorkDetails,
  nyYearWorkCompanyList,
  nyYearWorkDetails,
  tpfYearWorkCompanyList,
  tpfYearWorkDetails,
  xfYearWorkCompanyList,
  xfYearWorkDetails
} from '@/api/commonPage/AnnualWork'

export default {
  mixins: [commonList, refHandler],
  data() {
    return {
      formInline: {
        pageNum: 1,
        pageSize: 10,
        companyName: '',
        workId: '',
        dataYear: ''
      },
      pages: 0,
      total: 0,
      current: '',
      listData: [],
      finishNum: 0,
      unFinishNum: 0
    }
  },
  mounted() {
    const { current, workId } = this.$route.query
    this.current = current || ''
    this.formInline.workId = workId || ''
    this.getDetail()
    this.getCompanyList()
  },
  methods: {
    // 分页
    handlePages(value) {
      this.formInline.pageNum = value
      this.getCompanyList(true)
    },
    // 企业名称查询
    handleSearch(value) {
      this.formInline.companyName = value
      this.formInline.pageNum = 1
      this.listData = []
      this.getCompanyList()
    },
    // 跳转企业详情
    goToDetails(item) {
      const { companyId, companyName, dataYear } = item
      this.$router.push({
        path: '/staging/AnnualWorkCompanyDetails',
        query: { companyId, companyName, dataYear, current: this.current, workId: this.formInline.workId }
      })
    },
    // 获取详情
    async getDetail() {
      const api = {
        安全生产: aqYearWorkDetails,
        环保管理: hbYearWorkDetails,
        消防管理: xfYearWorkDetails,
        能源管理: nyYearWorkDetails,
        碳排放管理: tpfYearWorkDetails
      }
      const { status, data } = await api[this.current]({ workId: this.formInline.workId })
      if (status === 0 && data) {
        this.finishNum = data.finishNum
        this.unFinishNum = data.unFinishNum
      }
    },
    // 获取列表数据
    async getCompanyList(flag) {
      this.$refs.customLoadmore.loadStatus = true
      this.layout.showLoading()
      const api = {
        安全生产: aqYearWorkCompanyList,
        环保管理: hbYearWorkCompanyList,
        消防管理: xfYearWorkCompanyList,
        能源管理: nyYearWorkCompanyList,
        碳排放管理: tpfYearWorkCompanyList
      }
      const { status, data } = await api[this.current](this.formInline)
      if (status === 0 && data) {
        this.listData = flag ? this.listData.concat(data.list) : data.list
        this.total = data.total
        this.pages = data.pages
      }
      this.$refs.customLoadmore.loadStatus = false
      this.layout.hideLoading()
    },
    // 返回年度重点工作详情
    back() {
      this.$router.push({
        path: '/staging/AnnualWorkDetails',
        query: { current: this.current, workId: this.formInline.workId }
      })
    }
  }
}
</script>
<style lang="scss">

</style>
